<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style>
        html, body, #main {
            margin: 0;
            padding: 0;
        }

        #main {
            height: 800px;
        }

        #pic{
            display: none;
            position: absolute;
        }
    </style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main"></div>
<div id="pic">
    <img src="./img/touxiang.jpg" alt="">
</div>
<!-- ECharts单文件引入 -->
<script src="./js/echarts.js"></script>
<script src="./js/jquery.js"></script>
<script type="text/javascript">

    var dataList = {
        '阿拉山口': [82.5757, 45.1706],
        '包头': [109.8403, 40.6574],
        '北京': [116.4075, 39.9040],
        '成都': [104.0665, 30.5723],
        '大连': [121.6147, 38.9140],
        '大同': [113.3001, 40.0768],
        '德州': [116.3575, 37.4341],
        '福州': [119.2965, 26.0745],
        '广州': [113.2644, 23.1292],
        '贵阳': [106.6302, 26.6477],
        '哈尔滨': [126.5363, 45.8023],
        '邯郸': [114.5391, 36.6256],
        '杭州': [120.1551, 30.2741],
        '合肥': [117.2272, 31.8206],
        '侯马': [111.3720, 35.6191],
        '怀化': [109.9985, 27.5550],
        '淮安': [119.0153, 33.6104],
        '黄骅': [117.3300, 38.3714],
        '济南': [117.1205, 36.6510],
        '焦作': [113.2418, 35.2159],
        '九江': [116.0019, 29.7051],
        '九龙红磡': [114.1870, 22.3076],
        '昆明': [102.8329, 24.8801],
        '拉萨': [91.1409, 29.6456],
        '兰州': [103.8343, 36.0611],
        '黎塘': [109.1363, 23.2066],
        '连云港': [119.2216, 34.5967],
        '临汾': [111.5190, 36.0880],
        '柳州': [109.4160, 24.3255],
        '龙口': [120.4778, 37.6461],
        '洛阳': [112.4540, 34.6197],
        '满洲里': [117.3787, 49.5978],
        '南昌': [115.8581, 28.6832],
        '南京': [118.7969, 32.0603],
        '南宁': [108.3661, 22.8172],
        '南阳': [112.5283, 32.9908],
        '宁波': [121.5440, 29.8683],
        '启东': [121.6574, 31.8082],
        '秦皇岛': [119.6005, 39.9354],
        '青岛': [120.3826, 36.0671],
        '日照': [119.5269, 35.4164],
        '厦门': [118.0894, 24.4798],
        '上海': [121.4737, 31.2304],
        '深圳': [114.0579, 22.5431],
        '神木': [110.4871, 38.8610],
        '沈阳': [123.4315, 41.8057],
        '台前': [115.8717, 35.9701],
        '太原': [112.5489, 37.8706],
        '汤阴': [114.3572, 35.9218],
        '天津': [117.2010, 39.0842],
        '铜陵': [117.8121, 30.9454],
        '瓦塘': [109.7600, 23.3161],
        '温州': [120.6994, 27.9943],
        '乌鲁木齐': [87.6168, 43.8256],
        '武汉': [114.3054, 30.5931],
        '西安': [108.9402, 34.3416],
        '新乡': [113.9268, 35.3030],
        '信阳': [114.0913, 32.1470],
        '烟台': [121.4479, 37.4638],
        '兖州': [116.7838, 35.5531],
        '月山': [113.0550, 35.2104],
        '湛江': [110.3594, 21.2707],
        '长治': [113.1163, 36.1954],
        '郑州': [113.6254, 34.7466],
        '重庆': [106.5516, 29.5630]
    };
    require.config({
        paths: {
            echarts: './js/build/dist'
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/map'
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('main'));
            var cityMap = {
                "中国": "e",
                "省会": "capital"
            };
            var effect = {
                show: true,
                scaleSize: require('zrender/tool/env').canvasSupported ? 1 : 2,
                period: 30,             // 运动周期，无单位，值越大越慢
                color: '#fff',
                shadowColor: 'rgba(220,220,220,0.4)',
                shadowBlur: 5
            };

            function itemStyle(idx) {
                return {
                    normal: {
                        color: '#fff',
                        borderWidth: 1,
                        borderColor: ['rgba(30,144,255,1)', 'lime'][idx],
                        lineStyle: {
                            //shadowColor : ['rgba(30,144,255,1)','lime'][idx], //默认透明
                            //shadowBlur: 10,
                            //shadowOffsetX: 0,
                            //shadowOffsetY: 0,
                            type: 'solid'
                        }
                    }
                }
            };
            myChart.on("click", function (param){
            });

            option = {
                backgroundColor: '#1b1b1b',
                color: ['rgba(30,144,255,1)', 'lime'],
                title: {
                    text: '中国铁路运输主干线',
                    subtext: '数据来自维基百科',
                    sublink: 'http://zh.wikipedia.org/wiki/%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92%8C%E5%9B%BD%E9%93%81%E8%B7%AF%E8%BF%90%E8%BE%93',
                    x: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}'
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    x: 'right',
                    y: 'center',
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                series: [
                    {
                        name: '八纵通道',
                        type: 'map',
                        roam: true,
                        hoverable: true,
                        mapType: 'china',
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(100,149,237,1)',
                                borderWidth: 0.5,
                                areaStyle: {
                                    color: '#1b1b1b'
                                }
                            },
                            emphasis: {                 // 也是选中样式
                                borderWidth: 1,
                                borderColor: '#00ffff',
                                color: '#ffffff',
                                label: {
                                    show: true,
                                    textStyle: {
                                        color: '#ff0000'
                                    }
                                }
                            }
                        },
                        data: [],
                        markLine: {
                            symbol: ['circle', 'circle'],
                            symbolSize: 1,
                            effect: effect,
                            itemStyle: itemStyle(0),
                            smooth: true,
                            data: [
                                [{name: '北京'}, {name: '哈尔滨'}],
                                [{name: '哈尔滨'}, {name: '满洲里'}],

                                [{name: '沈阳'}, {name: '大连'}],
                                [{name: '大连'}, {name: '烟台'}],
                                [{name: '烟台'}, {name: '青岛'}],
                                [{name: '青岛'}, {name: '淮安'}],
                                [{name: '淮安'}, {name: '上海'}],
                                [{name: '上海'}, {name: '杭州'}],
                                [{name: '杭州'}, {name: '宁波'}],
                                [{name: '宁波'}, {name: '温州'}],
                                [{name: '温州'}, {name: '福州'}],
                                [{name: '福州'}, {name: '厦门'}],
                                [{name: '厦门'}, {name: '广州'}],
                                [{name: '广州'}, {name: '湛江'}],

                                [{name: '北京'}, {name: '天津'}],
                                [{name: '天津'}, {name: '济南'}],
                                [{name: '济南'}, {name: '南京'}],
                                [{name: '南京'}, {name: '上海'}],

                                [{name: '北京'}, {name: '南昌'}],
                                [{name: '南昌'}, {name: '深圳'}],
                                [{name: '深圳'}, {name: '九龙红磡'}],

                                [{name: '北京'}, {name: '郑州'}],
                                [{name: '郑州'}, {name: '武汉'}],
                                [{name: '武汉'}, {name: '广州'}],

                                [{name: '大同'}, {name: '太原'}],
                                [{name: '太原'}, {name: '焦作'}],
                                [{name: '焦作'}, {name: '洛阳'}],
                                [{name: '洛阳'}, {name: '柳州'}],
                                [{name: '柳州'}, {name: '湛江'}],

                                [{name: '包头'}, {name: '西安'}],
                                [{name: '西安'}, {name: '重庆'}],
                                [{name: '重庆'}, {name: '贵阳'}],
                                [{name: '贵阳'}, {name: '柳州'}],
                                [{name: '柳州'}, {name: '南宁'}],

                                [{name: '兰州'}, {name: '成都'}],
                                [{name: '成都'}, {name: '昆明'}]
                            ]
                        }
                    },
                    {
                        name: '八横通道',
                        type: 'map',
                        mapType: 'china',
                        itedmStyle: {
                            normal: {
                                borderColor: 'rgba(100,149,237,1)',
                                borderWidth: 0.5,
                                areaStyle: {
                                    color: '#1b1b1b'
                                }
                            }
                        },
                        data: [],
                        markLine: {
                            symbol: ['circle', 'circle'],
                            symbolSize: 1,
                            effect: effect,
                            itemStyle: itemStyle(1),
                            smooth: true,
                            data: [
                                [{name: '北京'}, {name: '兰州'}],
                                [{name: '兰州'}, {name: '拉萨'}],

                                [{name: '大同'}, {name: '秦皇岛'}],

                                [{name: '神木'}, {name: '黄骅'}],

                                [{name: '太原'}, {name: '德州'}],
                                [{name: '德州'}, {name: '龙口'}],
                                [{name: '龙口'}, {name: '烟台'}],

                                [{name: '太原'}, {name: '德州'}],
                                [{name: '德州'}, {name: '济南'}],
                                [{name: '济南'}, {name: '青岛'}],

                                [{name: '长治'}, {name: '邯郸'}],
                                [{name: '邯郸'}, {name: '济南'}],
                                [{name: '济南'}, {name: '青岛'}],

                                [{name: '瓦塘'}, {name: '临汾'}],
                                [{name: '临汾'}, {name: '长治'}],
                                [{name: '长治'}, {name: '汤阴'}],
                                [{name: '汤阴'}, {name: '台前'}],
                                [{name: '台前'}, {name: '兖州'}],
                                [{name: '兖州'}, {name: '日照'}],

                                [{name: '侯马'}, {name: '月山'}],
                                [{name: '月山'}, {name: '新乡'}],
                                [{name: '新乡'}, {name: '兖州'}],
                                [{name: '兖州'}, {name: '日照'}],

                                [{name: '连云港'}, {name: '郑州'}],
                                [{name: '郑州'}, {name: '兰州'}],
                                [{name: '兰州'}, {name: '乌鲁木齐'}],
                                [{name: '乌鲁木齐'}, {name: '阿拉山口'}],

                                [{name: '西安'}, {name: '南阳'}],
                                [{name: '南阳'}, {name: '信阳'}],
                                [{name: '信阳'}, {name: '合肥'}],
                                [{name: '合肥'}, {name: '南京'}],
                                [{name: '南京'}, {name: '启东'}],

                                [{name: '重庆'}, {name: '武汉'}],
                                [{name: '武汉'}, {name: '九江'}],
                                [{name: '九江'}, {name: '铜陵'}],
                                [{name: '铜陵'}, {name: '南京'}],
                                [{name: '南京'}, {name: '上海'}],

                                [{name: '上海'}, {name: '怀化'}],
                                [{name: '怀化'}, {name: '重庆'}],
                                [{name: '重庆'}, {name: '成都'}],
                                [{name: '成都'}, {name: '贵阳'}],
                                [{name: '贵阳'}, {name: '昆明'}],

                                [{name: '昆明'}, {name: '南宁'}],
                                [{name: '南宁'}, {name: '黎塘'}],
                                [{name: '黎塘'}, {name: '湛江'}]
                            ]
                        },
                        geoCoord: dataList,
                    },
                    {
                        name: '全部',
                        type: 'map',
                        mapType: 'china',
                        itedmStyle: {
                            normal: {
                                borderColor: 'rgba(100,149,237,1)',
                                borderWidth: 0.5,
                                areaStyle: {
                                    color: '#1b1b1b'
                                }
                            }
                        },
                        data: [],
                        markLine: {
                            symbol: ['circle', 'circle'],
                            symbolSize: 1,
                            effect: effect,
                            itemStyle: itemStyle(1),
                            smooth: true,
                            data: [
                                [{name: '黎塘'}, {name: '湛江'},{name:"西安"}],

                            ]
                        }
                    }
                ]
            };


            // 为echarts对象加载数据
            myChart.setOption(option);

            function eConsole(param) {
                console.log(param)
            }

//            myChart.on(ecConfig.EVENT.CLICK, eConsole);
        }
    );
</script>
</body>